<template>
  <div class="container">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="header_box">
          <div class="header_left">
            <img src="../../assets/鸿雁绿色.png" alt="" srcset="" />
            <h4>紫鸟浏览器云控中心</h4>
          </div>
          <div class="header_right">
            <el-icon
              size="28"
              color="#c0c0c0"
              style="margin-left: 10px"
              @click="toIndex"
              ><HomeFilled
            /></el-icon>
            <span style="color: #8a8e9e; font-weight: 700"
              >欢迎来到云控中心</span
            >
            <div class="user_title">
              <div class="icon_box">
                <el-icon color="#b6bac8" size="25"><Avatar /></el-icon>
              </div>
              <span style="color: #afafaf">系统管理员</span>
              <a class="login_out_link" @click="loginOut">退出</a>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="13%">
          <el-menu
            active-text-color="#49b7f7"
            background-color="#ffffff"
            class="el-menu-vertical-demo"
            :default-active="$route.path"
            text-color="#7a7d89"
            @open="handleOpen"
            @close="handleClose"
            style="height: 100vh"
            :collapse="isCollapse"
            router
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>项目一</span>
              </template>
              <el-menu-item
                index="/project1/home"
                @click="
                  addTabs({ title: '数据统计分析', url: '/project1/home' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>数据统计分析</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project1/project"
                @click="
                  addTabs({ title: '项目面板', url: '/project1/project' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>项目面板</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project1/ip"
                @click="addTabs({ title: 'IP池信息', url: '/project1/ip' })"
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>IP池信息</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project1/problemIP"
                @click="
                  addTabs({ title: '用户反馈', url: '/project1/problemIP' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>用户反馈</span>
                </template>
              </el-menu-item>
              <!-- <el-menu-item
                index="/project1/repairStation"
                @click="
                  addTabs({ title: '维修站', url: '/project1/repairStation' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>维修站</span>
                </template>
              </el-menu-item> -->
              <el-menu-item
                index="/project1/product"
                @click="
                  addTabs({ title: '产品信息', url: '/project1/product' })
                "
              >
                <template #title>
                  <el-icon><Goods /></el-icon>
                  <span>产品信息</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project1/user"
                @click="addTabs({ title: '账户管理', url: '/project1/user' })"
              >
                <template #title>
                  <el-icon><User /></el-icon>
                  <span>账户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project1/private"
                @click="
                  addTabs({ title: '私有协议配置', url: '/project1/private' })
                "
              >
                <template #title>
                  <el-icon><Film /></el-icon>
                  <span>私有协议配置</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project1/strategy"
                @click="addTabs({ title: '监控', url: '/project1/strategy' })"
              >
                <template #title>
                  <el-icon><Cpu /></el-icon>
                  <span>监控</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>项目二</span>
              </template>
              <el-menu-item
                index="/project2/home"
                @click="
                  addTabs({ title: '数据统计分析', url: '/project2/home' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>数据统计分析</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project2/project"
                @click="
                  addTabs({ title: '项目面板', url: '/project2/project' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>项目面板</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project2/problemIP"
                @click="
                  addTabs({ title: '用户反馈', url: '/project2/problemIP' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>用户反馈</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project2/user"
                @click="addTabs({ title: '账户管理', url: '/project2/user' })"
              >
                <template #title>
                  <el-icon><User /></el-icon>
                  <span>账户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project2/subscription"
                @click="
                  addTabs({ title: '订阅', url: '/project2/subscription' })
                "
              >
                <template #title>
                  <el-icon><Bell /></el-icon>
                  <span>订阅</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project2/seo"
                @click="
                  addTabs({ title: '搜索引擎优化', url: '/project2/seo' })
                "
              >
                <template #title>
                  <el-icon><Search /></el-icon>
                  <span>搜索引擎优化</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project2/payment"
                @click="
                  addTabs({ title: '支付模块', url: '/project2/payment' })
                "
              >
                <template #title>
                  <el-icon><Wallet /></el-icon>
                  <span>支付模块</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>共享货盘</span>
              </template>
              <el-menu-item
                index="/project3/ip"
                @click="addTabs({ title: 'IP池信息', url: '/project3/ip' })"
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>IP池信息</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/product"
                @click="
                  addTabs({ title: '产品信息', url: '/project3/product' })
                "
              >
                <template #title>
                  <el-icon><Goods /></el-icon>
                  <span>产品信息</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/private"
                @click="
                  addTabs({
                    title: '私有协议配置',
                    url: '/project3/private',
                  })
                "
              >
                <template #title>
                  <el-icon><Film /></el-icon>
                  <span>私有协议配置</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/strategy"
                @click="addTabs({ title: '监控', url: '/project3/strategy' })"
              >
                <template #title>
                  <el-icon><Cpu /></el-icon>
                  <span>监控</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/home"
                @click="
                  addTabs({ title: '数据统计分析', url: '/project3/home' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>数据统计分析</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/apikey"
                @click="addTabs({ title: 'API Key', url: '/project3/apikey' })"
              >
                <template #title>
                  <el-icon><Key /></el-icon>
                  <span>API Key</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/repairStation"
                @click="
                  addTabs({ title: '维修站', url: '/project3/RepairStation' })
                "
              >
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>维修站</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/dictionary"
                @click="
                  addTabs({ title: '字典管理', url: '/project3/dictionary' })
                "
              >
                <template #title>
                  <el-icon><Notebook /></el-icon>
                  <span>字典管理</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/feedback"
                @click="
                  addTabs({ title: '财务管理', url: '/project3/feedback' })
                "
              >
                <template #title>
                  <el-icon><ChatDotRound /></el-icon>
                  <span>财务管理</span>
                </template>
              </el-menu-item>
              <el-menu-item
                index="/project3/finance"
                @click="addTabs({ title: '营销', url: '/project3/finance' })"
              >
                <template #title>
                  <el-icon><Money /></el-icon>
                  <span>营销</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <div class="content">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              closable
              class="tabs_box"
              @edit="handleTabsEdit"
              @tab-click="changeTab"
            >
              <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
              >
                <div class="content_center">
                  <!-- 面包屑 -->
                  <div class="bread_box">
                    <el-breadcrumb separator="/">
                      <el-breadcrumb-item :to="{ path: '/index' }"
                        >首页</el-breadcrumb-item
                      >
                      <el-breadcrumb-item
                        v-if="breadcrumb.name"
                        :to="{ path: breadcrumb.name }"
                      >
                        <span style="cursor: pointer">{{
                          breadcrumb.title
                        }}</span>
                      </el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                  <router-view></router-view>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineOptions, ref, onBeforeMount } from "vue";
import { WalletFilled, AnotherIcon } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

defineOptions({ name: "Index" });

const router = new useRouter();

const isCollapse = ref(false);

const editableTabs = ref([
  { title: "首页", name: "/home" }, // 初始化一个默认的标签页
]);

let editableTabsValue = ref("/home"); // 默认选中的标签页

let breadcrumb = ref({});

const homeTab = ref({ title: "首页", url: "/home" });

const addTabs = (item) => {
  const tab = {
    title: item.title,
    name: item.url,
  };
  breadcrumb.value = tab;
  const exists = editableTabs.value.some(
    (existingTab) =>
      existingTab.title === tab.title && existingTab.name === tab.name
  );

  if (exists) {
    editableTabsValue.value = item.url;
    return;
  }

  editableTabs.value.push(tab);
  editableTabsValue.value = item.url;
  router.push({ path: item.url }); // 确保导航到新标签页
};

const changeTab = (tab) => {
  const tabInfo = {
    title: tab.props.label,
    name: tab.props.name,
  };
  breadcrumb.value = tabInfo;
  router.push({
    path: tab.props.name,
  });
};

const handleTabsEdit = (targetName, action) => {
  if (action === "remove") {
    const tabs = editableTabs.value;
    let activeName = editableTabsValue.value;
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
    }
    editableTabsValue.value = activeName;
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
  }
};

const loginOut = () => {
  localStorage.removeItem("ut");
  router.push({
    path: "/",
  });
};

const toIndex = () => {
  addTabs(homeTab.value);
  router.push({
    path: "/home",
  });
};

const menuExpand = (flag) => {
  if (flag == 0) {
    isCollapse.value = true;
    return;
  }
  isCollapse.value = false;
};

onBeforeMount(() => {
  addTabs(homeTab.value);
});
</script>

<style lang="less" scoped>
.header_box {
  width: 100%;
  height: 100%;
  display: flex;
  border: none;
  box-shadow: 0px 2px 5px 0px gainsboro;
}
.header_left {
  height: 100%;
  width: 13%;
  background-color: #ffffff;
  color: #273b63;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border: none;
}
.header_right {
  width: 87%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px gainsboro solid;
  background-color: #f5f8fa;
}
.el-header {
  --el-header-padding: 0px;
  --el-header-height: 60px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
}
.user_title {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.el-menu-item.is-active {
  background-color: #f4f6fa; /* 你想要的颜色 */
}
.tabs_box {
  color: #9b9ca6;
  background-color: #eaeef2;
  width: 100%;
  height: 100%;
  border-bottom: none;
}
::v-deep .el-tabs__item.is-active {
  color: black; //选中
  opacity: 1;
  background-color: #ffffff;
}

::v-deep .el-tabs__item:hover {
  color: #49b7f7; //悬浮
  cursor: pointer;
  opacity: 1;
}

::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}
.el-main {
  --el-main-padding: 0px;
  padding: var(--el-main-padding);
}
.content_center {
  width: 98%;
  height: 100%;
  background-color: #f5f8fa;
  padding: 30px 20px;
  padding-bottom: 0px;
}
:deep(.el-tabs__content) {
  width: 100%;
  height: 98%;
}
:deep(.el-tab-pane) {
  width: 100%;
  height: 100%;
}
:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: 0px solid var(--primary-color);
  height: var(--el-tabs-header-height);
}
:deep(.el-tabs__header) {
  margin: 0 0 0px;
  padding: 0;
  position: relative;
}
.bread_box {
  width: 100%;
  height: 3%;
}
.login_out_link {
  text-decoration: none;
  cursor: pointer;
  color: #9b9ca6;
  margin-left: 10px;
}
.icon_box {
  background-color: #e9edf1;
  border-radius: 10rpx;
  padding: 1px;
}
</style>